<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>个人资料页</title>
<link rel="stylesheet" href="css/cityLayout.css" />
<style type="text/css">
.dindan{
		height:40px;
		width:80px;
		text-align:center;
		line-height:40px;
		color:#555;
		background-color:#f0f0f0;
		font-size: 14px;
		font-weight: 700;
	}
	.dindanhezi{
		height:40px;
		width:900px;
		border-bottom:1px solid #f0f0f0;
		margin-bottom:20px;
		margin-left:330px;
		text-align:left;
	}
	.bo{
		padding-left:500px;
	}
	.putt{
		width:210px;
		height:27px;
		border:1px solid #DDDDDD;
	}
	.city_input{
		width:210px;
		height:27px;
		border:1px solid #DDDDDD;
	}
	
	.td1{
		height:30px;
		width:90px;
		text-align: right;
		padding-right:20px;
		color:#555;
		font-size: 14px;
		font-weight: 700;
		padding-top:15px;
	}
	.sexx{
	padding-top:12px;
	}
	
	.sub{
		width:140px;
		height:38px;
		color:white;
		background-color: #CA151D;
		border:1px solid #CA151D;
	}
	.opt{
		height:30px;
		width:70px;
		border: 1px solid #DDDDDD;
	}
	.momo{
		height:106px;
		width:106px;
		border:1px solid white;
		border-radius:50%;
	}
	
	.tankuang{
				height:100px;
				width:200px;
				border-top: 22px solid rgba(221,221,221,0.8);
				border-bottom: 2px solid rgba(221,221,221,0.8);
				border-left: 2px solid rgba(221,221,221,0.8);
				border-right: 2px solid rgba(221,221,221,0.8);
				border-radius: 10px;
				position:absolute;
				top:100px;
				left:750px;
				background-color: white;
				display:none;
				
			}
			.tankuang_head{
				position: relative;
				top: -20px;
				font-size: 16px;
				font-family: "楷体";
				color: white;
			}
			.guanbi{
				position:relative;
				height:20px;
				width:20px;
				float:right;
			}
			.tankuang_body{
				height: 80px;
				width: 180px;
				margin-left: 10px;
			}
			.tankuang_body_head{
				width: auto;
				height: 50px;
				border-bottom: 1px solid gainsboro;
				color: #555;
				font-size: 18px;
				line-height: 50px;
			}
			.tankuang_body_head1{
				padding-left: 15px;
			}
			.tankuang_body_head2{
				margin-left: 15px;
				width:300px;
			}
			.hinfojsp{
				height:800px;
		margin-top:50px;
			}
			
</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery.animate-colors.js"></script>
<script type="text/javascript" src="js/cityselect.js" ></script>
<script type="text/javascript">
$(function(){
	init_city_select($("#citySelect"));

	$(".momo").click(function(){
		$(".tankuang").show();
	});
	$(".guanbi").click(function(){
		$(".tankuang").hide();
	});
	
	$("#tankuang_body_head2").change(function(){
		var file=$("#tankuang_body_head2")[0].files[0];
		console.log(file);

		var formObj = new FormData();
		formObj.set('image', file);
		$.ajax({
			url : 'img?action=add',
			data : formObj,
			type : 'POST',
			dataType : 'json',
			processData : false,
			contentType : false,
			success : function(e) {
			/* console.log(res.id);
			console.log(res.folder); */
				var img=$(".momo");
				img.attr("src","uploads\\"+ e.p_newname);
				var img = $("<div style='float:left;'><input type='hidden' name='p_newname' value='"+e.p_newname+"'><input type='hidden' name='p_oldname' value='"+e.p_oldname+"'><input type='hidden' name='p_width' value='"+e.p_width+"'><input type='hidden' name='p_height' value='"+e.p_height+"'><input type='hidden' name='p_size' value='"+e.p_size+"'></div>");
				$("#yulan").append(img);
				$(".tankuang").remove();
			},
			error:function(e){
				msgbox('提示','操作失败!','',null,0,'error');
			}
		});
	});
})


</script>
</head>
<body>
<div ><%@include file="chead.jsp" %></div>
<div class="hinfojsp">
	<div style="float:left"><%@include file="hppmenu.jsp" %></div>
	<div class="dindanhezi">
		<div class="dindan">
			<span>个人资料</span>	
		</div>
	</div>
	
	<div class="bo">
	<form action="vip?action=updatevip" method="post">
		<table width=800px;height:1500px>
			<tr>
				<td class="td1">头像:</td>
				<td>
				<c:if test="${empty list2.getP_newname()}">
					<img class="momo" src="image/moren.jpg"/>
					<div id="yulan"></div>	
				</c:if>	
				<c:if test="${not empty list2.getP_newname()}">
					<img name="newname" class="momo" src="${list2.getP_newname() }"/>
					<div id="yulan">
						<input type='hidden' name='p_newname' value='1'>
					</div>	
				</c:if>	
				</td>
			</tr>
			<tr>
				<td class="td1">会员组:</td>
				<td>${list2.getViplist_name()}</td>
			</tr>
			<tr>
				<td class="td1">姓名:</td>
				<td><input class="putt" name="yname" value="${list2.getVname() }"></td>
			</tr>
			<tr>
				<td class="td1">性别:</td>
				<td>
				<div class="sexx">
					<input type="radio" name="ysex" value="男" ${list2.getSex()==0 ? "checked='checked'" : ""}  >男
					<input type="radio"  name="ysex" value="女" ${list2.getSex()==1 ? "checked='checked'" : ""}>女
				</div>
				</td>
			</tr>
			<tr>
				<td class="td1">出生日期:</td>
				<td><input class="putt" name="ydate" type="date" value="${list2.getBorn() }"></td>
			</tr>
			<tr>
				<td class="td1">所在地区:</td>
				<td >
						<input id="citySelect" name="citySelect" 
						    type="text" value="${list2.getAname() }"  class="city_input" >
				</td>
			</tr>
			<tr>
				<td class="td1">联系地址:</td>
				<td><input class="putt" name="yaddress" value="${list2.getAddress() }"></td>
			</tr>
			<tr>
				<td class="td1">手机号码:</td>
				<td><input class="putt" name="yphone" value="${list2.getTel() }"></td>
			</tr>
			<tr>
				<td class="td1">邮箱:</td>
				<td><input class="putt" name="yemail"  value="${list2.getEmail() }"></td>
			</tr>
			<tr>
				<td class="td1">邮编:</td>
				<td><input class="putt" name="yzipcode"  value="${list2.getZipcode() }"></td>
			</tr>
			<tr>
				<td class="td1">固定电话:</td>
				<td><input class="putt" name="ytel"  value="${list2.getPhone() }"></td>
			</tr>
			<tr>
				<td class="td1">QQ:</td>
				<td><input class="putt" name="yqq"  value="${list2.getQq() }"></td>
			</tr>		
			<tr>
				<td class="td1"></td>
				<td><input class="sub" type="submit" value="保存修改" ></td>
			</tr>
		</table>
		</form>
	</div>
	<div class="tankuang">
		<div class="tankuang_head">
			<span>设置头像</span>
			<img class="guanbi" src="image/关闭.png">
			<div class="tankuang_body">
				<div class="tankuang_body_head">
					<span class="tankuang_body_head1">选择上传图片</span>
				</div>		
				选择文件：<input id="tankuang_body_head2" type="file" name="img">				
			</div>
		</div>
	</div>
</div>
<div style="margin-top:50px;"><%@include file="cfooter.jsp" %></div>
</body>
</html>